@charset "utf-8";
@import 'reset';
@import 'common';

main {

    // 当前位置栏
    .location-bar {
        display: flex;
        margin: 45px auto 0;
        width: 900px;
        height: 30px;
        border-top: 1px solid #6db6ff;

        .blue-box {
            position: relative;
            width: 68px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #ffffff;
            background-color: #6db6ff;

            &::after {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 68px;
                width: 0;
                height: 0;
                border-width: 15px 7.5px;
                border-style: solid;
                border-color: #6db6ff transparent transparent #6db6ff;

            }
        }

        .title {
            margin-left: 5px;
            line-height: 30px;
        }

    }

    // 分类列表
    .category-list {
        margin: 30px auto 0;
        width: 900px;

        ul {
            li {
                display: flex;
                margin-bottom: 8px;
                align-items: center;

                img {
                    width: 38px;
                    height: 38px;
                    margin-right: 9px;
                }

                .all {
                    font-size: 14px;
                    color: #6db6ff;
                    margin-right: 5px;
                }

                .more {
                    font-size: 12px;
                }
            }
        }
    }

    // 详细列表
    .detail-list {

        // 列表头部
        .table-header {
            margin: 30px auto 0;
            width: 900px;
            height: 38px;
            border-top: 1px solid #6db6ff;
            background-color: #f5f5f5;

            .white-box {
                display: flex;
                justify-content: space-around;
                align-items: center;
                position: relative;
                top: -1px;
                margin: 0 auto;
                width: 752px;
                height: 38px;
                box-sizing: border-box;
                border-bottom: 1px solid #6db6ff;
                background-color: #ffffff;

                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    left: 0;
                    width: 0;
                    height: 0;
                    border-width: 19px 7.5px;
                    border-style: solid;
                    border-color: transparent transparent #6db6ff #6db6ff;
                }

                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 0;
                    height: 0;
                    border-width: 19px 7.5px;
                    border-style: solid;
                    border-color: transparent #6db6ff #6db6ff transparent;
                }

                span {
                    font-size: 16px;
                    color: black;
                }
            }
        }

        // 列表主体
        .list-body {
            position: relative;
            margin: 0 auto 18px;
            width: 900px;
            height: 533px;
            background-color: #f5f5f5;

            // 列表内容
            .list-content {
                position: absolute;
                display: flex;
                top: 20px;
                left: 71px;
                width: 706px;
                height: 497px;
                font-size: 12px;

                ul {
                    &:first-child {
                        margin-right: 68px;
                    }

                    &:nth-child(2) {
                        margin-right: 112px;
                    }

                    &:nth-child(3) {
                        margin-right: 85px;
                    }

                    &:nth-child(4) {
                        margin-right: 85px;
                    }

                    li {
                        margin-bottom: 25px;
                    }
                }
            }
        }
    }

    // 页码切换
    .page-switch {
        display: flex;
        margin: 0 auto 15px;
        justify-content: space-between;
        width: 250px;
        height: 18px;

        .last-page,
        .next-page {
            width: 55px;
            height: 18px;
            font-size: 12px;
            background-color: #e5e5e5;
            border: solid 1px #c9c9c9;
        }

        .page-one {
            width: 18px;
            height: 18px;
            color: #ffffff;
            background-color: #6db6ff;
            border: solid 1px #aaaaaa;
        }

        .page-two,
        .page-three,
        .page-four,
        .page-five {
            width: 18px;
            height: 18px;
            background-color: #e5e5e5;
            border: solid 1px #c9c9c9;
        }

        .last-page:hover,
        .next-page:hover {
            width: 55px;
            height: 18px;
            color: #ffffff;
            background-color: #6db6ff;
            border: solid 1px #aaaaaa;
        }

        .page-two:hover,
        .page-three:hover,
        .page-four:hover,
        .page-five:hover {
            width: 18px;
            height: 18px;
            color: #ffffff;
            background-color: #6db6ff;
            border: solid 1px #aaaaaa;
        }
    }
}